<template>
	<view class="page_content header-bg">
		<!-- <view class=""></view> -->
		<view class="head_content">
			<CustomNavbar :title="isPay?'Change transaction password':'Change login password'" 
			rightText="Complete"
			@rightClick="rightClick">

			</CustomNavbar>
			<view class="content items">
				<view class="cell">
					<u--input placeholder="Enter new password" :maxlength="isPay?6:16" border="none" v-model="form.newPwd" :type="isPay?'number':'password'"></u--input>
				</view>
				<view class="cell" v-if="isSetPwd">
					<u--input placeholder="Re-enter password" :maxlength="isPay?6:16" border="none" v-model="form.newPwd1" :type="isPay?'number':'password'"></u--input>
				</view>
			</view>
			
			<view class="content" style="padding-left: 24rpx; color: rgb(218, 218, 218, 0.5);">
				{{isPay?'6-digit password, numbers':'6-16 characters password, numbers or letters'}}
			</view>
			<view class="content items" v-if="isPay">
				<view class="cell">
					<u-input placeholder="Please enter verification code" border="none" v-model="form.code">
						<u--text :text="isSendCode? `Resend in ${codeTime} seconds`:'Get verification code'" slot="suffix" type="tips" @click="sendCode"></u--text>
					</u-input>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import CustomNavbarHome from '../../components/CustomNavbar-home.vue'
	export default {
		components: { CustomNavbarHome },
		data() {
			return {
				isPay: false,
				isSetPwd: false,
				form: {
					newPwd1: '',
					newPwd: '',
					code: ''
				},
				codeTime: 60,	
				isSendCode: false,
				userInfoStore: { ...this.$store.state.user.userInfo },
			}
		},
		onLoad(op) {
			this.isPay = op.t === '1'
			if (this.isPay) {
				this.$request('user.validatePayPwd', {}).then(res => {
					this.isSetPwd = res.data
				})
			}
			console.log(this.userInfoStore)
		},
		methods: {
			//  Resend in X seconds(str, val) {
			// 	return str. Resend in X seconds('X', val)
			// },
			sendCode() {
				let { nation, phone } = this.userInfoStore
				let obj = { nation, phone }
				let vm = this
				this.$request('login.sendCode', obj, false)
					.then(res => {
						uni.hideLoading()
						uni.$u.toast('Verification code sent')
						vm.isSendCode = true
						let timer = setInterval(() => {
							if(vm.codeTime <= 0) {
								vm.isSendCode = false
								clearInterval(timer)
								return
							}
							vm.codeTime--
						}, 1000)
					})
					.catch(err => {
						uni.hideLoading()
						uni.$u.toast('Failed to send verification code！')
					})
			},
			rightClick() {
				if(!this.newPwd) {
					
				}
				if(this.isPay){
					if (this.isSetPwd){
						if(this.form.newPwd !== this.form.newPwd1){
							this.$u.toast('Passwords do not match')
							return
						}
					}
					this.$request('user.updatePayPwd', { password: this.form.newPwd, code: this.form.code }).then(res => {
							uni.navigateBack({ delta: 1 })
					})
				}
			},
			
		}
	}
</script>

<style>
	.content {
		width: 688rpx;
		margin: 0 auto;
		margin-top: 34rpx;
		color: white;
	}

	.items {
		background: rgba(255, 255, 255, .1);
		border-radius: 23rpx;
	}

	.items .cell {
		height: 92rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		position: relative;
		overflow: hidden;
	}

	.items .cell:first-child::after {
		content: " ";
		position: absolute;
		background-color: rgb(218, 218, 218, 0.4);
		bottom: 0;
		height: 1rpx;
		width: 90%;
	}
</style>